<template>

  <div class="index">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="450px" interval="3000">
        <el-carousel-item v-for="i in 3" :key="i">
          <el-image :src="imgSrc[i-1]" fit="cover" style="width: 100%;height: 100%"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 活动列表 -->
    <div class="main-box">
      <div v-if="drawList.length === 0">
        <el-empty description="当前没活动，wc"></el-empty>
      </div>
      <div class="main" v-else>
        <el-row>
          <el-col  :xs="24" :sm="12" :md="8" :lg="6"  v-for="draw in this.drawList" :key="draw.id">
            <div class="detail">
              <ul>
                <li>
                  <!-- 活动详情图 -->
                  <img src="../assets/img/carousel.jpg" alt="" />
                  <!-- 活动详情信息 -->
                  <div class="info">
                    <p>{{draw.title}}</p>
                    <span>{{ draw.remark }}</span>
                    <el-button @click="open(draw.id)">进入详情</el-button>
                  </div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "qiantai",
  data() {
    return {
      imgSrc: [
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      ],
      userId: "",
      drawList: [],
    }
  },
  methods: {
    open(id){
      this.$router.push({path: '/draw/'+id})
    },
  },
  created() {
    this.$axios.get("/sys/userInfo").then(res => {
      this.userId = res.data.data.id
      this.$axios.get("/draw/getDeptDrawById/"+this.userId).then(res => {
        this.drawList = res.data.data
      })
    })

  },
}
</script>

<style scoped>
/* 主页 */
.index {
  width: 95%;
  margin: 0 auto;
}

/* 轮播图 */
.block {
  margin-bottom: 30px;
}
.carousel-item {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
.carousel-img {
  max-width: 100%;
  max-height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

li {
  list-style-type:none;
  width: 90%;
  float: left;
  border-radius: 10px;
  margin-bottom: 5%;
  box-shadow: 5px 5px 5px #999;
  margin-left: 4%;
  padding-bottom: 30px;
  background: #fff;
}
li img {
  width: 100%;
  border-radius: 15px;
}
.info p {
  font-size: 18px;
  margin-left: 5%;
}
.info span {
  color: #999;
  font-size: 12px;
  margin-left: 5%;
}
.info button {
  border-radius: 10px;
  color: #fff;
  background: #f91818;
  float: right;
  margin-right: 10%;
}
</style>
